<template>
	<view class="top">
		<text> {{user_data.Number}} 当前充值号</text>
		<text style="font-size: 20px;">{{user_data.Balance}}</text>
		<text>我的余额(元)</text>
	</view>
	<text style="margin: 0 3vw;">充值金额</text>
	<view class="box">
		<uni-grid :column="3" :showBorder="false" :highlight="false" :square="false">
			<uni-grid-item v-for="item in price" :key="item">
				<view class="isbox" :class="isfont == item?'select':''" @click="isselect(item)">
					<text class="font">储值卡{{item}}元</text>
					<text style="font-size: 14px; color: rgb(120, 120, 120);">到账金额:{{item}}元</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
	<view class="way">
		<text>支付方式</text>
		<view class="isway waybox" @click="isway='wechat'">
			<view class="isway">
				<image src="../../static/微信支付.png" mode="aspectFill" class="way_image"></image>
				<text>微信支付</text>
			</view>
			<image :src="isway=='wechat' ? '../../static/选中.png' : '../../static/未选中.png'" mode="aspectFill"
				class="buttom"></image>
		</view>
		<view class="isway waybox" @click="isway='Alipay'">
			<view class="isway">
				<image src="../../static/支付宝.png" mode="aspectFill" class="way_image"></image>
				<text>支付宝支付</text>
			</view>
			<image :src="isway=='Alipay' ? '../../static/选中.png' : '../../static/未选中.png'" mode="aspectFill"
				class="buttom"></image>
		</view>
	</view>
	<view style="margin: 0 5vw;">
		<text>充值说明</text>
		<view class="isway" style="padding-top: 2vw;" v-for="(item,index) in illustrate" :key="index">
			<view class="drop"></view>
			<text class="little">{{item}}</text>
		</view>
	</view>
	<view class="settlement">
		<view class="isclass left">
			￥{{isfont}}
		</view>
		<view class="isclass right">
			确认支付
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const price = ref(['100', '200', '300', '400', '500', '600', '700', '800'])
	const isfont = ref('100')
	const user_data = ref({
		Telephone: '17603287873',
		Number: '12345678910',
		Used_traffic: '128',
		Remaining_traffic: '128',
		Balance: '0',
		Days_remaining: '2',
	})
	const illustrate = ref([
		'充值只可以选择以上固定档位的金额',
		'充值只能在本卡内使用',
		'充值金额无法提现无法找零'
	])

	function isselect(index) {
		isfont.value = index
	}
	const isway = ref('wechat')
</script>

<style lang="scss" scoped>
	.top {
		padding: 2vh;
		margin: 1vh 3vw;
		height: 10vh;
		background-color: #046CF6;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 10px;

		text {
			flex: 1;
		}
	}

	.box {
		margin: 2vw;
	}

	.isbox {
		margin: 1vw;
		height: 20vw;
		border-radius: 10px;
		border: 1px solid #848484;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgb(255, 255, 255);
	}

	.select {
		background-color: #F3F8FF;
		border: 1px solid #046CF6;
		color: #046CF6;
	}

	.settlement {
		position: absolute;
		bottom: 0;
		display: flex;
		box-shadow: 0px -2px 5px #d8d8d8;

		.isclass {
			width: 50vw;
			height: 15vw;
			padding-top: 5vw;
			text-align: center;
			font-size: 20px;
		}

		.left {
			background-color: #fcfcfc;
			color: rgb(255, 0, 0);
		}

		.right {
			background-color: #046CF6;
			color: white;
		}
	}

	.way {
		padding: 0 5vw;

		.waybox {
			margin: 5vw 0;
			justify-content: space-between;
		}
	}

	.isway {
		display: flex;
		// flex-direction: column;
		align-items: center;
		// justify-content: center;
	}

	.way_image {
		margin: 0 1vw;
		height: 8vw;
		width: 8vw;
	}

	.buttom {
		height: 5vw;
		width: 5vw;
	}
		
	.drop{
		background-color: #046CF6;
		width: 2vw;
		height: 2vw;
		margin: 1vw;
		border-radius: 50%;
	}
	.little{
		color: #848484;
		font-size: 16px;
	}
</style>